<template>
  <view
    class="template-group tn-safe-area-inset-bottom"
    style="
      height: 100%;
      padding-top: 112rpx;
      background: linear-gradient(0deg, #39308d 0%, #342c67 100%);
    "
  >
    <!-- 顶部自定义导航 -->
    <tn-nav-bar
      fixed
      height="56"
      class="tn-color-white"
      :bottomShadow="false"
      backgroundColor="#342c68"
      >话题详情</tn-nav-bar
    >

    <view class="card-swiper">
      <!-- 头部start-->
      <view class="shop-function">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
          <view class="justify-content-item">
            <view class="tn-flex tn-flex-col-center tn-flex-row-left">
              <view class="tn-color-white" style="width: 100%">
                <view
                  class="tn-text-bold"
                  style="font-family: Source Han Sans; font-size: 48rpx"
                >
                  #{{ body.title }}#
                </view>
                <view
                  class="tn-text-ellipsis tn-text-bold tn-flex"
                  style="font-size: 28rpx; margin-top: 20rpx"
                >
                  <text>
                    {{ body.goods_num
                    }}{{ body.goods_num >= 10000 ? "W+" : "" }}热度</text
                  >
                  <view style="margin: 0 20rpx">|</view>
                  <text>
                    {{ content.length
                    }}{{ content.length >= 5 ? "W" : "" }}条内容</text
                  >
                </view>
                <view
                  class="tn-text-ellipsis-3"
                  style="margin-top: 20rpx; font-size: 20rpx"
                >
                  {{ body.jianjie }}</view
                >
              </view>
            </view>
          </view>
          <!-- <view class="justify-content-item tn-flex-row-center">
            <view class="tn-padding-xs tn-color-white tn-round tn-shadow-blur">
              <text
                >{{ content.length
                }}{{ content.length >= 5 ? "W" : "" }}条内容</text
              >
            </view>
          </view> -->
        </view>
      </view>
      <view class="bgImg">
        <view class="shadown"></view>
        <img v-if="body.image" :src="body.image" alt="" />
        <img v-else src="../static/other/nullImg.png" alt="" />
      </view>
    </view>
    <!-- 头部 end-->

    <view class="group-wrap tn-bg-white" id="page_tips">
      <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback">
        <view style="padding: 0 20rpx;">
        <view class="screening">
          <p v-for="(item,index) in screen" :key="index" :class="scrActive == index && 'active'"  @click="screenFn(index)">{{ item.text }}</p>
        </view>
          <quan-list :list="content" :index="true"></quan-list>
        </view>
      </mescroll-body>
    </view>
        <view class="fab">
      <img src="../static/other/penicon.png" alt="" />
      <text>参与话题</text>
    </view>
    <!-- 登录框组件 -->
    <login-fn :is-show-login="loginBoxFlag" @close="closeGlobalLoginFn">
    </login-fn>
  </view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  name: "TemplateGroup",
  mixins: [template_page_mixin, MescrollMixin],
  components: {
    MescrollBody,
  },
  data() {
    return {
      loginBoxFlag: false, // 登录框显示隐藏状态
      id: 25,
      body: {
        title: "",
        jianjie: "",
        length: 0,
      },
      screen:[
        {
          text:'最新'
        },
        {
          text:'最热'
        }
      ],
      show1: false,
      cardCur: 0,
      swiperList: [],
      content: [],
      activeBgAnimation: {},
      scrActive:0,
    };
  },

  onLoad(option) {
    let that = this;
    uni.$off("setLoginBoxFlag");
    uni.$on("setLoginBoxFlag", (loginBoxFlag) => {
      that.loginBoxFlag = loginBoxFlag;
    });
    if (option.id) {
      this.id = option.id;
    }
    this.info();
  },
  methods: {

    screenFn(i){
      this.scrActive = i
    },

    async ondianzan(data) {
      for (let i in this.content) {
        if (this.content[i].id == data.id) {
          console.log(data.msg);

          if (data.msg == "点赞成功") {
            this.content[i].is_like = true;
            this.content[i].likeCount++;
            const xinzeng = {
              src: this.$store.state.userInfo.userInfoAvatar,
            };
            this.content[i].viewUser.latestUserAvatar.push(xinzeng);
          } else {
            this.content[i].is_like = false;
            this.content[i].likeCount--;
            let listuser = this.content[i].viewUser.latestUserAvatar;
            for (let ddd in listuser) {
              if (
                listuser[ddd].src == this.$store.state.userInfo.userInfoAvatar
              ) {
                listuser.splice(ddd, 1);
              }
            }
          }
        }
      }
    },

    async info() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/api/Category/Gettags",
        data: {
          id: this.id,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.body = result.data.data;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    /// 列表调用
    downCallback(mescroll) {
      mescroll.endSuccess();
      mescroll.resetUpScroll();
    },
    async upCallback(mescroll) {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/index/getGoodslist",
        data: {
          tags_id: that.id,
          page: mescroll.num,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          if (mescroll.num == 1) {
            that.content = result.data.data.data;
          } else {
            that.content = that.content.concat(result.data.data.data);
          }
          mescroll.endSuccess(
            result.data.data.data.length,
            result.data.data.data.length >= mescroll.size
          );
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async flow() {
      if (!this.isLogin) {
        this.loginBoxFlag = true;
        return false;
      }
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/api/user/followgroup",
        data: {
          id: that.id,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          if (result.data.msg == "取消成功") {
            that.body.is_follow = false;
          } else {
            that.body.is_follow = true;
          }
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current;
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },

    // 弹出模态框
    showModal(event) {
      this.openModal();
    },
    // 打开模态框
    openModal() {
      this.show1 = true;
    },
    // 初始化导航栏信息
    async initNavBarRectInfo() {
      const navBarRectInfo = await this._tGetRect("#navbar");
      const pageTipsRectInfo = await this._tGetRect("#page_tips");
      // console.log(navBarRectInfo, pageTipsRectInfo, navBarRectInfo?.top, pageTipsRectInfo?.top);
      if (
        !navBarRectInfo.hasOwnProperty("top") ||
        !pageTipsRectInfo.hasOwnProperty("top")
      ) {
        setTimeout(() => {
          this.initNavBarRectInfo();
        }, 10);
        return;
      }
      this.navBarRectInfo = {
        top: navBarRectInfo.top,
      };
      this.navBarChangebaseLineHeight =
        pageTipsRectInfo.top - navBarRectInfo.top;
    },
    // 更新导航栏信息
    updateNavBarRectInfo() {
      this._tGetRect("#page_tips").then((res) => {
        const top = res?.top || 0;
        if (!top) {
          return;
        }
        const differHeight = top - this.navBarRectInfo.top;
        const opacity = differHeight / this.navBarChangebaseLineHeight;
        if (opacity < 0) {
          // this.navBarStyle.opacity = 1
          // this.navBarStyle.display = 'flex'
          this.navBarStyle.color = "rgba(0, 0, 0, ${opacity})";
          this.navBarStyle2.color = "rgba(0, 0, 0, ${opacity})";
          this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`;
        } else {
          // this.navBarStyle.opacity = 1 - opacity
          // this.navBarStyle.display = 'flex'
          this.navBarStyle.color = "rgba(255, 255, 255, 1)";
          this.navBarStyle2.color = "rgba(255, 255, 255, 0)";
          this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`;
        }

        // console.log(top, differHeight, opacity);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  // color: #FFFFFF;
  font-size: 18px;
  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.05;
    background-color: #000000;
  }
}

/* 轮播视觉差 start */
.card-swiper {
  height: 358rpx !important;
  padding: 70rpx 40rpx 44rpx 40rpx;
  position: relative;
  .bgImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .shadown {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(
        180deg,
        rgba(216, 216, 216, 0) 0%,
        rgba(54, 46, 121, 0.8) 67%
      );
      z-index: 1;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

// .card-swiper swiper-item {
//   width: 750rpx !important;
//   left: 0rpx;
//   box-sizing: border-box;
//   // padding: 0rpx 30rpx 90rpx 30rpx;
//   overflow: initial;
// }

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(1);
  transition: all 0.2s ease-in 0s;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

.image-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-banner image {
  width: 100%;
  height: 100%;
}

/* 轮播指示点 start*/
.indication {
  z-index: 9999;
  width: 100%;
  height: 36rpx;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.spot {
  background-color: #ffffff;
  opacity: 0.6;
  width: 10rpx;
  height: 10rpx;
  border-radius: 20rpx;
  top: -60rpx;
  margin: 0 8rpx !important;
  position: relative;
}

.spot.active {
  opacity: 1;
  width: 30rpx;
  background-color: #ffffff;
}

/* 顶部店铺 */
.shop-function {
  position: relative;
  z-index: 3;
}

/* 阴影 start*/
.group-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 头像 start */
.logo-image {
  width: 110rpx;
  height: 110rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
  // background-color: #FFFFFF;
}

/* 内容*/
.group-wrap {
  position: relative;
  z-index: 2;
  // padding: 20rpx 30rpx;
  margin-top: -20rpx;
  border-radius: 30rpx 30rpx 0 0;
  background: linear-gradient(0deg, #39308d 0%, #342c67 100%);
  .screening{
    display: flex;
    padding: 40rpx 20rpx 26rpx 20rpx;
    p{
      font-size: 24rpx;
      color: #fff;
      margin-right: 40rpx;
    }
    .active{
      font-size: 28rpx;
      font-weight: bold;
      color: #24D4D1;
    }
  }
}

/* 文章内容 start*/
.blogger {
  &__item {
    padding: 30rpx;
  }

  &__author {
    &__btn {
      margin-right: -12rpx;
      opacity: 0.5;
    }
  }

  &__desc {
    line-height: 55rpx;

    &__label {
      padding: 0 20rpx;
      margin: 0rpx 18rpx 0 0;

      &--prefix {
        color: #00ffc8;
        padding-right: 10rpx;
      }
    }
  }

  &__content {
    margin-top: 18rpx;
    padding-right: 18rpx;

    &__data {
      line-height: 46rpx;
      text-align: justify;
      overflow: hidden;
      transition: all 0.25s ease-in-out;
    }

    &__status {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #82b2ff;
    }
  }

  &__main-image {
    border-radius: 16rpx;

    &--1 {
      max-width: 80%;
      max-height: 300rpx;
    }

    &--2 {
      max-width: 260rpx;
      max-height: 260rpx;
    }

    &--3 {
      height: 212rpx;
      width: 100%;
    }
  }

  &__count-icon {
    font-size: 40rpx;
    padding-right: 5rpx;
  }

  &__ad {
    width: 100%;
    height: 500rpx;
    transform: translate3d(0px, 0px, 0px) !important;

    ::v-deep .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    &__item {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: translate3d(100%, 0px, 0px) scale(1) !important;
      transition: transform 0.25s ease-in-out;
      z-index: 1;

      &--0 {
        transform: translate3d(0%, 0px, 0px) scale(1) !important;
        z-index: 4;
      }

      &--1 {
        transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
        z-index: 3;
      }

      &--2 {
        transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
        z-index: 2;
      }
    }

    &__content {
      border-radius: 40rpx;
      width: 640rpx;
      height: 500rpx;
      overflow: hidden;
    }

    &__image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 文章内容 end*/

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}

.fab {
  width: 432rpx;
  height: 100rpx;
  background: linear-gradient(
    180deg,
    rgba(65, 133, 255, 0.8) 0%,
    rgba(85, 223, 252, 0.8) 100%
  );
  position: fixed;
  bottom: 140rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  border-radius: 130rpx;
  color: #fff;
  font-weight: bold;
  font-size: 36rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 48rpx;
    height: 48rpx;
    margin-right: 8rpx;
  }
}

/* 间隔线 end*/
</style>
